<template>
  <div class="review-item">
    <div class="review-header">
      <div class="reviewer-info">
        <img :src="review.userAvatar || '/default-avatar.png'" alt="用户头像" class="avatar" />
        <span class="reviewer-name">{{ review.userName }}</span>
      </div>
      <div class="review-time">{{ formatDate(review.createTime) }}</div>
    </div>
    <div class="review-rating">
      <star-rating :score="review.rating" :show-score="true" />
    </div>
    <div class="review-content">
      <p>{{ review.content }}</p>
      <div v-if="review.images && review.images.length" class="review-images">
        <img
          v-for="(image, index) in review.images"
          :key="index"
          :src="formatImageUrl(image)"
          alt="评价图片"
          @click="$emit('preview-image', review.images, index)"
        />
      </div>
    </div>
    <div v-if="review.reply" class="merchant-reply">
      <p><strong>商家回复：</strong>{{ review.reply }}</p>
      <span class="reply-time">{{ formatDate(review.replyTime) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import StarRating from '@/components/common/StarRating.vue';
import { Review } from '@/types/customer';
import { formatImageUrl } from '@/utils/image';

defineProps<{
  review: Review;
}>();

defineEmits<{
  (e: 'preview-image', images: string[], index: number): void;
}>();

// 格式化日期
const formatDate = (dateStr: string | undefined) => {
  if (!dateStr) return '';
  
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};
</script>

<style scoped>
.review-item {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.reviewer-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.review-time {
  color: #999;
  font-size: 12px;
}

.review-content {
  margin: 10px 0;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.merchant-reply {
  margin-top: 10px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 14px;
}

.reply-time {
  font-size: 12px;
  color: #999;
  display: block;
  text-align: right;
  margin-top: 5px;
}
</style>
